<template>
    <div id="main">
        <div id="top_option">
            <v-row><h4>控制操作区</h4></v-row>
            <div style="margin-top:20px">
                <v-row dense >
                    <v-col cols="12" md="1"><h4 class="row_pos">查询关键字：</h4></v-col>
                    <v-col cols="12" md="1"><v-text-field label="任务名称" v-model="query_job_name" clearable></v-text-field></v-col>
                    <v-col cols="12" md="2">
                        <v-combobox label="任务类型" v-model="query_job_type" :items="func_items" clearable></v-combobox>
                    </v-col>
                    <v-col cols="12" md="1">
                        <v-btn small color="green" class="row_pos" @click="getConfig">查询</v-btn>  
                    </v-col>
                    <v-col cols="12" md="2">
                        <v-btn small color="blue" class="row_pos" @click="runJob">启动定时任务</v-btn>
                        <v-btn small color="blue" class="row_pos" @click="runproxy">启动代理服务</v-btn>
                    </v-col>
                    <v-col cols="12" md="1">
                        <v-btn small color="primary" class="row_pos">切换数据源</v-btn>
                    </v-col>
                    <v-col cols="12" md="1"><v-select :items="data_origin" v-model="target" label="数据源"></v-select></v-col>
                    <v-col cols="12" md="1"><v-btn small color="primary" class="row_pos" style="float: right" @click="password_encode">加密</v-btn></v-col>
                    <v-col cols="12" md="1"><v-text-field label="输入密码" v-model="password" type="password"></v-text-field></v-col>
                    <v-col cols="12" md="1"><v-text-field label="加密后的密码" v-model="password_after"></v-text-field></v-col>
                </v-row>
            </div>
        </div>
        <div>
            <v-data-table
                :headers="headers"
                :items="desserts"
                :height="bar.height"
                fixed-header
                checkbox-color="green"
                :items-per-page="bar.page"
            >
                <template v-slot:top>
                <v-toolbar
                    flat
                    :color="bar.class"
                    :dark="bar.dark"
                    dense
                >
                    <v-toolbar-title v-text="bar.title"></v-toolbar-title>
                    <v-divider
                    class="mx-4"
                    inset
                    vertical
                    ></v-divider>
                    <v-spacer></v-spacer>

                    <template>

                    <v-btn
                        color="primary"
                        dark
                        class="mb-2"
                        @click="add_Job"
                        icon
                    >
                        <v-icon>{{ bar.icon }}</v-icon>
                    </v-btn>
                    </template>

                    <v-dialog
                        v-model="dialog"
                        max-width="800px"
                        height="660px"
                    >
                        <v-EditCofnig 
                            v-if="dialog" 
                            :info="job_info" 
                            :operate="operate"
                            @queryJobList="getConfig"
                        ></v-EditCofnig>
                    </v-dialog>

                </v-toolbar>
                </template>

                <template
                    v-slot:item.param="{ item }"
                >
                    <div style="width: 600px">{{ item.param }}</div>
                </template>

                <template v-slot:item.actions="{ item }">
                    <div style="width: 50px">
                        <v-icon
                            small
                            @click="editItem(item)"
                        >
                            mdi-pencil-outline
                        </v-icon>
                    </div>
                </template>

                <v-data-footer
                disable-items-per-page
                ></v-data-footer>
            </v-data-table>
        </div>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import EditCofnig from './EditJob.vue'

export default defineComponent({
    setup() {
        
    },
    components: {
        'v-EditCofnig': EditCofnig
    },
    data(){
        return {
            query_job_name: '',
            query_job_type: '',
            func_items: ['auto_update_script', 'auto_update_process', 'delet_history_dirs', 'query_jira_info', 'query_ts_modification', 'exec_task', 'query_config', 'print_log'],
            bar: { class: '#0CE8F5FF', title: '定时任务配置信息', page: 12, height: '620px', function: 'config', icon: 'mdi-card-plus-outline' },
            headers: [
                { text: '任务ID', value: 'job_id' },
                { text: '任务名称', value: 'job_name', align: 'start' },
                { text: '是否启用', value: 'flag' },
                { text: '触发类型', value: 'corn_type', sortable: false },
                { text: '触发时间-Day', value: 'corn_day', sortable: false },
                { text: '触发时间-Hour', value: 'corn_hour', sortable: false },
                { text: '触发时间-Minute', value: 'corn_min', sortable: false },
                { text: '跳过时间', value: 'skip_date', sortable: false },
                { text: '任务类型', value: 'funName', sortable: false },
                { text: '任务参数', value: 'param', sortable: false },
                { text: '操作', value: 'actions', sortable: false }
            ],
            password: '',
            password_after: '',
            desserts: [],
            dialog: false,
            target: 'localhost@hsdj',
            data_origin: ['localhost@hsdj', '10.20.26.98@hsdj', '10.20.26.98@hsdoc'],
            job_info: {
                job_id: null,
                job_name: '',
                funName: '',
                flag: false,
                corn_type: 'corn',
                corn_day: '',
                corn_hour: '',
                corn_min: '',
                skip_date: '',
                groups: [],
                param: ''
            },
            operate: 'add'
        }
    },
    mounted(){
        this.$emit("changeTaskID", 3)
        this.getConfig()
    },
    methods: {
        password_encode(){
            let post_word = {'password': this.password}
            this.$api.job.passwordEncode(post_word).then(res=>{
                this.password_after = res.data.data
            })
        },
        getConfig(){
            let params = {}
            if(this.query_job_name){
                params.job_name__contains = this.query_job_name
            }
            if(this.query_job_type){
                params.funName__contains = this.query_job_type
            }
            let get_data = {'params': JSON.stringify(params)}
            console.log(get_data)
            this.$api.job.getJobConfig(get_data).then(res=>{
                console.log(res)
                this.desserts = res.data.data
            })
        },
        add_Job(){
            this.dialog = true
            this.job_info = {
                job_id: null,
                job_name: '',
                funName: '',
                flag: false,
                corn_type: 'corn',
                corn_day: '',
                corn_hour: '',
                corn_min: '',
                skip_date: '',
                groups: [],
                param: ''
            }
            this.operate = 'add'
        },
        editItem(node_info){
            console.log('editItem ...')
            this.job_info = node_info
            this.dialog = true
            console.log(node_info)
            this.operate = 'edit'
        },
        runJob(){
            let post_data = {'flag': 'start', 'job_name': 'schedule_job'}
            this.$api.job.runJob(post_data).then(res=>{
                alert(res.data.res)
            })
        },
        runproxy(){
            let post_data = {'flag': 'start', 'job_name': 'flask_proxy'}
            this.$api.job.runJob(post_data).then(res=>{
                alert(res.data.res)
            })
        }
    }
})
</script>

<style scoped>
#main {
    margin-left: 2%;
    margin-right: 2%;
}
#top_option {
    margin-top: 30px;
    margin-left: 2%;
    height: 100px;
}
.row_pos {
    margin-top: 20px;
    margin-left: 15px;
}
</style>
